<template>
  <a-radio-group
    v-model="defaultValue"
    :size="size"
    :button-style="!btn ? 'outline' : 'solid'"
    @change="handleChange"
  >
    <template v-if="btn">
      <a-radio-button
        v-for="(element, index) in treeData"
        :key="index"
        :value="
          systemAreaType.data_type == 0
            ? element.area_code
            : systemAreaType.data_value_type == 1
            ? element.data_value * 1
            : element.data_value
        "
      >
        {{ element.area_name }}
      </a-radio-button>
    </template>
    <template v-else>
      <a-radio
        v-for="(element, index) in treeData"
        :key="index"
        :value="
          systemAreaType.data_type == 0
            ? element.area_code
            : systemAreaType.data_value_type == 1
            ? element.data_value * 1
            : element.data_value
        "
      >
        <app-show :code="code" :value="element.area_code" />
      </a-radio>
    </template>
  </a-radio-group>
</template>

<script>
import systemAreaType from "@/api/systemAreaType"
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-system-area",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "systemAreaValue",
  },
  props: {
    code: {
      type: [String, Number],
      default: () => {
        return null
      },
    },
    size: {
      type: String,
      default: "default",
    },
    btn: {
      type: Boolean,
      default: false,
    },
    extData: {
      // 父元素传递的数据， 原封不动 回调
      type: [Number, String, Array, Object],
      default: null,
    },
    systemAreaValue: {
      type: [Number, String, Array],
      default: () => {
        return null
      },
    },
  },
  data() {
    return {
      systemAreaType: undefined,
      treeData: undefined,
      mapData: undefined,
      selectValue2Obj: {},
      defaultValue:
        this.$func.isString(this.systemAreaValue) && this.systemAreaValue
          ? this.systemAreaValue
          : this.$func.isNumber(this.systemAreaValue)
          ? this.systemAreaValue
          : undefined,
    }
  },
  watch: {
    code() {
      this.getSystemArea()
    },
    systemAreaValue() {
      this.defaultValue = undefined
      if (this.$func.isString(this.systemAreaValue) && this.systemAreaValue) {
        this.defaultValue = this.systemAreaValue
        return
      }
      if (this.$func.isNumber(this.systemAreaValue)) {
        this.defaultValue = this.systemAreaValue
        return
      }
      return
    },
  },
  mounted() {
    this.getSystemArea()
  },
  methods: {
    async getSystemArea() {
      if (!this.code) {
        return
      }

      systemAreaType.cache(this.code).then((response) => {
        if (response.code !== 1 || !response.data) {
          return
        }
        this.systemAreaType = response.data.data_type
        this.treeData = response.data.data_menu
        this.mapData = response.data.data_map

        for (var index in this.treeData) {
          var tmpData = this.treeData[index]
          if (this.systemAreaType.data_type == 0) {
            this.selectValue2Obj[tmpData["area_code"]] = tmpData
          } else {
            this.selectValue2Obj[tmpData["data_value"]] = tmpData
          }
        }
      })
    },
    handleChange(e) {
      const value = e.target.value
      this.$emit("change-system-area", value)
      this.$emit("change", this.selectValue2Obj[value], this.extData)
    },
  },
}
</script>

<style lang="less" type="text/less" scoped></style>
